<template>
  <div v-if="this.$store.state.pointClickDialog" class="modal-overlay">
    <!-- 关闭按钮 -->
    <div class="close-button" @click="this.$store.state.pointClickDialog = false">
      <button class="close-btn">✖</button>
    </div>
    <BaseComponent>
      <template v-slot:animation>
        <transition-group name="slide">
          <div
              v-for="(position, index) in displayedPositions"
              :key="currentIndex + '-' + index"
          class="animation-component"
          >
          <ContentFramework
              :top="position.top"
              :left="position.left"
            :info-item="position.infoItem"
            :width="'100%'"
            :height="'130%'"
          />
  </div>
  </transition-group>
</template>
</BaseComponent>
</div>
</template>

<script>
import ContentFramework from "@/views/homeComponents/mapComponent/ContentFramework.vue";
import BaseComponent from "@/views/homeComponents/mapComponent/BaseComponent.vue";
import request from "@/utils/request.js";
export default {
  name: "PointClickDialog",
  components: { BaseComponent, ContentFramework },
  data() {
    return {
      userInformation:JSON.parse(localStorage.getItem("user")),
      positions: [
        { top: '-130px', left: '-350px' },
        { top: '-10px', left: '-10px' },
        { top: '-190px', left: '-175px' },
        { top: '-240px', left: '150px' },
        { top: '-160px', left: '350px' },
      ],
      currentIndex: 0, // 初始化为0
      items: []
    };
  },
  computed: {
    displayedPositions() {
      const totalItems = this.items.length;
      const result = [];
      const positionsToShow = Math.min(5, totalItems); // 最多展示 5 个
      for (let i = 0; i < positionsToShow; i++) {
        const itemIndex = (this.currentIndex + i) % totalItems; // 确保索引有效
        result.push({
          ...this.positions[i % this.positions.length], // 循环使用位置
          infoItem: this.items[itemIndex] // 获取对应的 item 数据
        });
      }
      return result;
    }
  },
  mounted() {
    this.setData()
    this.startAnimation();
    this.addMouseWheelListener();
  },
  beforeUnmount() {
    this.removeMouseWheelListener();
  },
  methods: {
    // 添加鼠标滚轮监听
    addMouseWheelListener() {
      if (document.addEventListener) {
        // 标准浏览器使用 'mousewheel'，火狐浏览器使用 'DOMMouseScroll'
        document.addEventListener('mousewheel', this.handleMouseWheelScroll, { passive: true });
        document.addEventListener('DOMMouseScroll', this.handleMouseWheelScroll, { passive: true });
      } else {
        // 兼容 IE 浏览器
        document.attachEvent('onmousewheel', this.handleMouseWheelScroll);
      }
    },
    // 移除鼠标滚轮监听
    removeMouseWheelListener() {
      if (document.removeEventListener) {
        document.removeEventListener('mousewheel', this.handleMouseWheelScroll);
        document.removeEventListener('DOMMouseScroll', this.handleMouseWheelScroll);
      } else {
        document.detachEvent('onmousewheel', this.handleMouseWheelScroll);
      }
    },
    // 滚轮触发时的处理函数
    handleMouseWheelScroll(event) {
      if (this.$store.state.pointClickDialog) {
        this.$store.state.pointClickDialog =false; // 滚动时关闭弹窗
      }
    },
    startAnimation() {
      this.updatePositionsInterval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.items.length; // 每次加 1，循环展示
      }, 3000);
    },
    setData() {
      if (this.$store.state.pointClickDialogData.length>0){
        this.items = this.$store.state.pointClickDialogData
        return
      }
      let level = this.userInformation.level
      let organizationId = this.userInformation.organization
      let isAllClient = this.userInformation.isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = Object.values(this.userInformation.clientIds);
      } else {
        clientIds = [];
      }
      request.get("/equipment-input-store/findMapByClient?level="+level+"&organizationId="+organizationId+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then(res=>{
        console.log(res.data)
        this.items = res.data
      })
    },
  },
  beforeDestroy() {
    clearInterval(this.updatePositionsInterval); // 清除定时器
  }
};
</script>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.51);
  display: flex;
  justify-content: center;
  align-items: center;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
}

.close-btn {
  background-color: transparent;
  color: #efe6e6;
  border: none;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.animation-component {
  position: absolute; /* 确保组件可以自由定位 */
}
</style>
